<template>
  <div class="tag-box">
    <el-collapse v-model="activeModule">
      <el-collapse-item v-for="{title ,view} in modules" :name="view.uuid">
        <template slot="title">
          <span>{{ title }}</span>
        </template>
        <el-row>
          <el-tag
              :closable="view === activeElement?true:false"
              size="small"
              :type="view === activeElement?'':'info'"
              @click="(e) => {activeLayer(e, view)}"
              @close="(e) => {dele(e, view)}"
          >{{ title + ': ' + view.desc }}
          </el-tag>
        </el-row>
        <el-tag
            v-for="(layer,index) in view.subViews"
            :key="index"
            :closable="layer === activeElement?true:false"
            size="small"
            :type="layer === activeElement?'':'info'"
            @click="(e) => {activeLayer(e, layer)}"
            @close="(e) => {dele(e, layer)}"
        >{{ layer.desc }}
        </el-tag>

      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import {cumulativeOffset, checkInView, deepTrav} from '../../utils/utils'
import _ from "lodash";

export default {
  data() {
    return {
      activeModule: [],
    }
  },
  computed: {
    page() {
      return this.$vptd.state.page
    },
    docHeader() {
      return this.page.docHeader
    },
    pageHeader() {
      return this.page.pageHeader
    },
    docBody() {
      return this.page.docBody
    },
    pageFooter() {
      return this.page.pageFooter
    },
    docFooter() {
      return this.page.docFooter
    },
    activeElement() {
      return this.$vptd.state.activeElement
    },
    modules() {
      const moduleArr = []
      if (this.docHeader) {
        moduleArr.push({title: "docHeader", view: this.docHeader})
      }
      if (this.pageHeader) {
        moduleArr.push({title: "pageHeader", view: this.pageHeader})
      }
      if (this.docBody) {
        moduleArr.push({title: "docBody", view: this.docBody})
      }
      if (this.pageFooter) {
        moduleArr.push({title: "pageFooter", view: this.pageFooter})
      }
      if (this.docFooter) {
        moduleArr.push({title: "docFooter", view: this.docFooter})
      }
      return moduleArr
    }
  },
  methods: {
    activeLayer(e, item) {
      this.$vptd.commit('select', {
        uuid: item.uuid,
      })
      let viewport = document.querySelector('#viewport')
      if (viewport) {
        let target = viewport.querySelector(`[data-uuid='${item.uuid}']`)
        if (target && !checkInView(target)) {
          viewport.scrollTop = cumulativeOffset(target).top - 50
        }
      } else {
        console.error('未找到 "#viewport" 的节点')
      }
    },

    // 删除元件
    dele(e, item) {
      this.$vptd.commit('delete', item.uuid)
    },
  },
  watch: {
    'activeElement': {
      handler(newVal) {

        for (let i = 0; i < this.modules.length; i++) {
          const moduleView = this.modules[i]
          if (moduleView.view) {
            let find = false
            const uuid = moduleView.view.uuid
            if (moduleView.view === this.activeElement) {
              find = true
            } else {
              deepTrav(moduleView.view, (objc, key, parent) => {
                if (objc === this.activeElement) {
                  find = true
                  return true
                }
              })
            }

            if (find) {
              if (_.findIndex(this.activeModule, uuid) < 0) {
                this.activeModule.push(uuid)
              }
            }
          }
        }
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.tag-box {
  .el-tag {
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
</style>
